<template>
  <div class="header-right">
<!--    <div class="header-box1">
      <img :src="icon_plan" />
    </div>-->
<!--    <div style="position: relative;left: -20%;height:31px;width: 95px " >
      <img src="../../views/Home/img/HeadButton.png" height="31" width="95"/>
      <span class="titleClass" style="left: 30%;">总装台1</span>
  </div>
    <div style="position: relative;left: -30%;height:31px;width: 95px">
      <img src="../../views/Home/img/HeadButton.png" height="31" width="95"/>
      <span class="titleClass" style="left: 30%;">纵移链</span>
    </div>
    <div style="position: relative;left: -40%;height:31px;width: 95px" @click="buttonClick('3','液压站')">
      <img src="../../views/Home/img/HeadButton.png" height="31" width="95"/>
      <span class="titleClass" style="left: 30%;">液压站</span>
    </div>
    <div style="position: relative;left: -50%;height:31px;width: 95px" @click="buttonClick('2','副线往复杆')">
      <img src="../../views/Home/img/HeadButton.png" height="31" width="95"/>
      <span class="titleClass" >副线往复杆</span>
    </div>
    <div style="position: relative;left: -60%;height:31px;width: 95px" @click="buttonClick('1','主线往复杆')">
      <img src="../../views/Home/img/HeadButton.png" height="31" width="95px"/>
      <span class="titleClass">主线往复杆</span>
    </div>

    <div  style="height:31px;width: 75px">
      <img src="../../views/Home/img/HeadButtonRight.png" height="31" width="75"/>
      <span class="titleClass">总装台2</span>
    </div>
    <div style="height:31px;width: 75px">
      <img src="../../views/Home/img/HeadButtonRight.png" height="31" width="75"/>
      <span class="titleClass" style="left: 25%;">积放链</span>
    </div>
    <div style="height:31px;width: 75px">
      <img src="../../views/Home/img/HeadButtonRight.png" height="31" width="75"/>
      <span class="titleClass" style="left: 25%;">循环吊</span>
    </div>
    <div style="height:31px;width: 100px">
      <img src="../../views/Home/img/HeadButtonRight.png" height="31" width="100"/>
      <span class="titleClass">焊机机器人</span>
    </div>-->
    <div style="position: relative;left: 18%">
      <div id="he-plugin-simple" ></div>
    </div>
    <div style="position: relative;left: -58%;height:31px;width: 95px;text-align: center"  @click="buttonClick('0','')">
      <img src="../../views/Home/img/HeadButton.png" height="31" width="95px"/>
      <span class="titleClass"> 总装</span>
    </div>
    <div style="position: relative;left: -58%;height:31px;width: 95px;text-align: center"  @click="buttonClick('4','')">
      <img src="../../views/Home/img/HeadButton.png" height="31" width="95px"/>
      <span class="titleClass">  {{ tableName }}</span>
    </div>
    <div style="position: relative;left: -58%;height:31px;width: 95px;text-align: center"  @click="buttonClick('5','')">
      <img src="../../views/Home/img/HeadButton.png" height="31" width="95px"/>
      <span class="titleClass">预处理</span>
    </div>
    <div style="position: relative;left: -58%;height:31px;width: 95px;text-align: center"  @click="buttonClick('7','')">
      <img src="../../views/Home/img/HeadButton.png" height="31" width="95px"/>
      <span class="titleClass">喷漆烘干</span>
    </div>
    <div style="position: relative;left: -58%;height:31px;width: 95px;text-align: center"  @click="buttonClick('6','')">
      <img src="../../views/Home/img/HeadButton.png" height="31" width="95px"/>
      <span class="titleClass">生产计数</span>
    </div>
    <div class="header-box2" >
      <div class="datetime">{{ datetime }}</div>
    </div>
  </div>
</template>
<script>
window.WIDGET = {
  "CONFIG": {
    "modules": "01234",
    "background": "5",
    "tmpColor": "FFFFFF",
    "tmpSize": "16",
    "cityColor": "FFFFFF",
    "citySize": "16",
    "aqiColor": "FFFFFF",
    "aqiSize": "16",
    "weatherIconSize": "24",
    "alertIconSize": "18",
    "padding": "10px 10px 10px 10px",
    "shadow": "0",
    "language": "auto",
    "fixed": "false",
    "vertical": "top",
    "horizontal": "left",
    "city": "CN101281601",
    "key": "36324711b5cf4e27bd5ecdd33409be0b"
  }
}  // 将WIDGET前边加上window 否则读取不到此变量
import icon_plan from "./image/icon_plan.png";
import { vMiniWeather } from 'vue-mini-weather'
import {GetData, GetToken} from "@/api";
/*import base from '@/utils/base64'  //引入*/
export default {
  name: "headerRight",
  data() {
    return {
      icon_plan,
      curDate: new Date(),
      tableName:'底架',
      tableType:'4',
      clientId: 'NDc4MTkzN2Y2ZDNkOWFi',
      Secret: 'OWZkNmNmNGJhOTExNjk2',
      base64_cid_secret: 'basic TkRjNE1Ua3pOMlkyWkROa09XRmk6T1daa05tTm1OR0poT1RFeE5qazI='
    };
  },
  created() {
  /*  var baseClientStr = this.clientId+':'+this.Secret;
    var base1 = new base();
    this.base64_cid_secret=base1.encode(baseClientStr) //加密*/
    this.getToken()
    window.WIDGET = {
      "CONFIG": {
        "modules": "01234",
        "background": "5",
        "tmpColor": "FFFFFF",
        "tmpSize": "20",
        "cityColor": "FFFFFF",
        "citySize": "20",
        "aqiColor": "FFFFFF",
        "aqiSize": "20",
        "weatherIconSize": "30",
        "alertIconSize": "18",
        "padding": "10px 10px 10px 10px",
        "shadow": "0",
        "language": "auto",
        "fixed": "false",
        "vertical": "top",
        "horizontal": "left",
        "key": "556b05784864447b85c9dc6279310de3"
      }
    };
    (function (d) {
      var c = d.createElement('link')
      c.rel = 'stylesheet'
      c.href = 'https://widget.qweather.net/simple/static/css/he-simple.css?v=1.4.0'
      var s = d.createElement('script')
      s.src = 'https://widget.qweather.net/simple/static/js/he-simple.js?v=1.4.0'
      var sn = d.getElementsByTagName('script')[0]
      sn.parentNode.insertBefore(c, sn)
      sn.parentNode.insertBefore(s, sn)
    })(document)
    setInterval(() => {
      this.curDate = new Date();
    }, 30000);
  },
  components: {
    vMiniWeather
  },
  computed: {
    datetime() {
      return (
        this.curDate.getFullYear() +
        "-" +
        this.$numLength((this.curDate.getMonth() + 1)) +
        "-" +
        this.$numLength(this.curDate.getDate()) +
        " " +
        this.$numLength(this.curDate.getHours()) +
        ":" +
        this.$numLength(this.curDate.getMinutes())
      );
    }
  },
  methods: {
    buttonClick(Type,Name){
/*      debugger
      if (this.tableType === '4'){
        this.tableType =='0';
        this.tableName =='总装';
      }else{
        this.tableType =='4';
        this.tableName =='底架';
      }*/

      this.$parent.CLickButton(Type,Name);
    },
    goviewPage (pagekey){
     /* this.$router.push({name: 'DJLayout-Personnel',params: {key: pagekey}})*/
      this.$router.push({ path: "/DJLayout" });
    },
    getToken() {
      if (!localStorage.getItem('accessToken')) {
        GetToken().then(res => {
          localStorage.setItem('accessToken', 'Bearer '+res.data.access_token)
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.header-right {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  .titleClass{
    position: relative;
    top: -100%;
  /*  left: 18%;*/
    font-size: 12px;
    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
    font-weight: 500;
    color: rgb(23, 255, 255);
  }
  .header-box1 {
    margin-right: 14px;
  }
  .header-box2 {
    margin-right: 24px;
  }
  .datetime {
    font-size: 30px;
    font-family: DINAlternate-Bold, DINAlternate;
    font-weight: bold;
    color: #FFFFFF;
  }
}
</style>
